<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>MooTools Sortables Test 1</title>
	<link rel="stylesheet" type="text/css" href="http://www.tomocchino.com/_mootools/styles/demos.css" />
	<link rel="stylesheet" type="text/css" href="http://www.tomocchino.com/_mootools/styles/sort1.css" />
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	<!-- 

<script type="text/javascript" src="http://www.tomocchino.com/_mootools/scripts/mootools/mootools.r684.js"></script>
 -->
<script type="text/javascript" src="mootools.r684.js"></script>	
	<script type="text/javascript">
		var controls, mySortables; //use any of the commented techniques to select which lists are to be made sortable
		window.addEvent('domready', function(){
			//s = new SortablesTest($('list-1'), {
			//s = new Sortables('list-1', {
			mySortables = new Sortables(['list-1', 'list-2', 'list-3', 'list-4'], {
				cloneOpacity:.2,
				clone: true,
				revert: true,
				onComplete:function(){
					var t = mySortables.serialize(2, function(element, index){
						return element.getProperty('id').replace('item_','') + '=' + index;
					}).join('&');
					alert(t);
				}
			});
		
		});
	</script>
</head>

<body>
	<div id="control">
		<span>styles: <a href="styles/sort1.css">sort1.css</a></span>
		<span>source: <a href="Sortables.js">Sortables.js</a></span>

	
	</div>
	
	<div id="lists">
		<ul id="list-1" class="green">
			<li id="item-1-1" class="green">item 1-0</li>
			<li id="item-1-2" class="green">item 1-1</li>

			<li id="item-1-3" class="green">item 1-2</li>
			<li id="item-1-4" class="green">item 1-3</li>
			<li id="item-1-5" class="green">item 1-4</li>
			<li id="item-1-6" class="green">item 1-5</li>
		</ul>
	
		<ul id="list-2" class="blue">
			<li id="item-2-1" class="blue">item 2-0</li>

			<li id="item-2-2" class="blue">item 2-1</li>
			<li id="item-2-3" class="blue">item 2-2</li>
			<li id="item-2-4" class="blue">item 2-3</li>
			<li id="item-2-5" class="blue">item 2-4</li>
			<li id="item-2-6" class="blue">item 2-5</li>
		</ul>

		
		<ul id="list-3" class="orange">
			<li id="item-3-1" class="orange">item 3-0</li>
			<li id="item-3-2" class="orange">item 3-1</li>
			<li id="item-3-3" class="orange">item 3-2</li>
			<li id="item-3-4" class="orange">item 3-3</li>
			<li id="item-3-5" class="orange">item 3-4</li>

			<li id="item-3-6" class="orange">item 3-5</li>
		</ul>
		
		<ul id="list-4" class="red">
			<li id="item-4-1" class="red">item 4-0</li>
			<li id="item-4-2" class="red">item 4-1</li>
			<li id="item-4-3" class="red">item 4-2</li>
			<li id="item-4-4" class="red">item 4-3</li>

			<li id="item-4-5" class="red">item 4-4</li>
			<li id="item-4-6" class="red">item 4-5</li>
		</ul>
	</div>
		
</body>
</html>
